import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Rate } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function ProductReview() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const overallRatingRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const testingExperienceRef = useRef<HTMLDivElement>(null);
  const prosRef = useRef<HTMLDivElement>(null);
  const consRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您要评测的产品名称，这将用于生成个性化的产品评测',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品所属的类别，如手机/数码产品、服装/鞋包等',
    },
    {
      key: 'overallRating',
      title: '选择整体评分',
      description: '为产品选择整体评分，最高5分，支持半星评分',
    },
    {
      key: 'style',
      title: '选择评测风格',
      description: '选择您希望的评测风格，如专业客观、亲切体验、对比测评等',
    },
    {
      key: 'testingExperience',
      title: '填写使用体验（可选）',
      description: '输入产品的使用体验，让评测更加真实可信',
    },
    {
      key: 'pros',
      title: '填写产品优点（可选）',
      description: '输入产品的优点，每行一个，突出产品的优势',
    },
    {
      key: 'cons',
      title: '填写产品不足（可选）',
      description: '输入产品的不足，每行一个，使评测更加全面客观',
    },
    {
      key: 'generateButton',
      title: '生成产品评测',
      description: '完成所有设置后，点击此按钮生成专业的产品评测报告',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的产品评测',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    overallRating: overallRatingRef,
    style: styleRef,
    testingExperience: testingExperienceRef,
    pros: prosRef,
    cons: consRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成产品评测的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    overallRating: number,
    pros: string,
    cons: string,
    testingExperience: string,
    comparison: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 评测标题
    result += `📊 ${productName}深度评测 | ${productType}\n\n`;

    // 整体评分
    result += `【整体评分】\n`;
    result += `⭐⭐⭐⭐⭐ ${overallRating}/5 分\n\n`;

    // 评测导语
    result += `【评测导语】\n`;
    if (style === '专业客观') {
      result += `经过为期${Math.floor(Math.random() * 7) + 3}天的深度使用，我们对${productName}进行了全面的测试和评估。以下是我们的详细评测报告。\n`;
    } else if (style === '亲切体验') {
      result += `大家好！今天我要给大家分享一下我使用${productName}的真实体验。作为一名${productType}爱好者，我对这款产品充满了期待...\n`;
    } else if (style === '对比测评') {
      result += `在众多${productType}产品中，${productName}究竟有何优势？今天我们将通过与同类产品的详细对比，为您揭晓答案。\n`;
    }

    // 产品外观
    result += `\n【外观设计】\n`;
    if (productType.includes('手机') || productType.includes('数码')) {
      result += `📱 ${productName}采用了${Math.random() > 0.5 ? '全面屏' : '曲面屏'}设计，屏幕尺寸为${Math.floor(Math.random() * 2) + 5}.${Math.floor(Math.random() * 9)}英寸。\n`;
      result += `机身材质为${Math.random() > 0.5 ? '玻璃' : '金属'}，提供${Math.random() > 0.5 ? '黑色、白色、蓝色' : '金色、银色、紫色'}等多种配色选择。\n`;
      result += `整体设计${Math.random() > 0.5 ? '简约时尚' : '科技感十足'}，握感舒适，重量适中。\n`;
    } else if (productType.includes('服装') || productType.includes('鞋包')) {
      result += `👕 ${productName}采用了${Math.random() > 0.5 ? '简约' : '时尚'}的设计风格，适合${Math.random() > 0.5 ? '日常穿搭' : '各种场合'}。\n`;
      result += `材质选择${Math.random() > 0.5 ? '优质' : '环保'}，做工${Math.random() > 0.5 ? '精细' : '扎实'}，细节处理到位。\n`;
      result += `版型设计${Math.random() > 0.5 ? '修身' : '宽松'}，穿着舒适，展现个人魅力。\n`;
    } else if (productType.includes('美妆') || productType.includes('护肤')) {
      result += `💄 ${productName}的包装设计${Math.random() > 0.5 ? '简约大方' : '精美奢华'}，采用${Math.random() > 0.5 ? '环保材质' : '高端材质'}制作。\n`;
      result += `产品质地${Math.random() > 0.5 ? '轻盈' : '丰润'}，易于推开和吸收。\n`;
      result += `气味${Math.random() > 0.5 ? '淡雅清香' : '浓郁持久'}，使用感舒适。\n`;
    } else {
      result += `📦 ${productName}的外观设计${Math.random() > 0.5 ? '简洁实用' : '美观大方'}，符合${productType}的使用场景需求。\n`;
      result += `材质选择${Math.random() > 0.5 ? '耐用' : '轻便'}，做工${Math.random() > 0.5 ? '精细' : '可靠'}，品质有保障。\n`;
    }

    // 使用体验
    result += `\n【使用体验】\n`;
    if (testingExperience) {
      result += testingExperience + '\n';
    } else {
      result += `在实际使用过程中，${productName}表现${Math.random() > 0.5 ? '出色' : '稳定'}。\n`;
      result += `${Math.random() > 0.5 ? '功能' : '性能'}方面完全满足日常需求，使用起来${Math.random() > 0.5 ? '流畅便捷' : '简单直观'}。\n`;
      result += `经过${Math.floor(Math.random() * 7) + 3}天的使用，没有出现明显的${Math.random() > 0.5 ? '质量' : '性能'}问题。\n`;
    }

    // 优点
    result += `\n【产品优点】\n`;
    if (pros) {
      const prosList = pros.split('\n').filter(p => p.trim());
      prosList.forEach((pro, index) => {
        result += `👍 ${index + 1}. ${pro}\n`;
      });
    } else {
      result += `👍 1. ${Math.random() > 0.5 ? '性能' : '功能'}表现出色，超出预期\n`;
      result += `👍 2. 设计合理，使用便捷\n`;
      result += `👍 3. 材质优良，做工精细\n`;
      result += `👍 4. 性价比高，值得购买\n`;
    }

    // 缺点
    result += `\n【产品不足】\n`;
    if (cons) {
      const consList = cons.split('\n').filter(c => c.trim());
      consList.forEach((con, index) => {
        result += `👎 ${index + 1}. ${con}\n`;
      });
    } else {
      result += `👎 1. ${Math.random() > 0.5 ? '价格略高' : '功能略有欠缺'}\n`;
      result += `👎 2. ${Math.random() > 0.5 ? '续航能力一般' : '体积稍大'}\n`;
    }

    // 同类产品对比
    result += `\n【同类产品对比】\n`;
    if (comparison) {
      result += comparison + '\n';
    } else {
      result += `与市场上同类产品相比，${productName}在${Math.random() > 0.5 ? '性能' : '价格'}方面具有一定优势。\n`;
      result += `相比品牌A的产品，${Math.random() > 0.5 ? '功能更丰富' : '价格更亲民'}；相比品牌B的产品，${Math.random() > 0.5 ? '质量更可靠' : '设计更时尚'}。\n`;
    }

    // 适用人群
    result += `\n【适用人群】\n`;
    if (productType.includes('手机') || productType.includes('数码')) {
      result += `适合对${Math.random() > 0.5 ? '性能' : '外观'}有一定要求的${Math.random() > 0.5 ? '年轻人' : '商务人士'}。\n`;
    } else if (productType.includes('服装') || productType.includes('鞋包')) {
      result += `适合喜欢${Math.random() > 0.5 ? '简约' : '时尚'}风格，注重${Math.random() > 0.5 ? '舒适度' : '品质'}的消费者。\n`;
    } else if (productType.includes('美妆') || productType.includes('护肤')) {
      result += `适合${Math.random() > 0.5 ? '所有肤质' : '干性/油性/混合性肤质'}的人群使用。\n`;
    } else {
      result += `适合需要${productType}的${Math.random() > 0.5 ? '家庭用户' : '个人用户'}。\n`;
    }

    // 购买建议
    result += `\n【购买建议】\n`;
    if (overallRating >= 4.5) {
      result += `💯 强烈推荐购买！${productName}是一款${Math.random() > 0.5 ? '性价比极高' : '表现出色'}的产品，值得拥有。\n`;
    } else if (overallRating >= 3.5) {
      result += `👍 推荐购买。${productName}整体表现${Math.random() > 0.5 ? '不错' : '稳定'}，虽然有一些小缺点，但不影响整体使用体验。\n`;
    } else {
      result += `🤔 可以考虑购买。${productName}有一定的优势，但也存在一些不足，建议根据个人需求进行选择。\n`;
    }

    // 结语
    result += `\n【结语】\n`;
    if (style === '专业客观') {
      result += `综合来看，${productName}是一款${Math.random() > 0.5 ? '表现优秀' : '中规中矩'}的产品，在${productType}领域具有一定的竞争力。\n`;
    } else if (style === '亲切体验') {
      result += `总的来说，我对${productName}的使用体验${Math.random() > 0.5 ? '非常满意' : '比较满意'}，如果你正在寻找一款${productType}，不妨考虑一下它。\n`;
    } else if (style === '对比测评') {
      result += `通过本次对比评测，我们认为${productName}在${Math.random() > 0.5 ? '某些方面' : '整体表现上'}优于同类产品，是一个${Math.random() > 0.5 ? '值得考虑' : '不错'}的选择。\n`;
    }

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, overallRating, pros, cons, testingExperience, comparison, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, overallRating, pros, cons, testingExperience, comparison, style);
      setGeneratedContent(generated);
      message.success('产品评测生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '产品评测.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '手机/数码产品', value: '手机/数码产品' },
    { label: '服装/鞋包', value: '服装/鞋包' },
    { label: '美妆/护肤产品', value: '美妆/护肤产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '图书文具', value: '图书文具' },
    { label: '运动户外', value: '运动户外' },
    { label: '其他', value: '其他' },
  ];

  // 风格选项
  const styleOptions = [
    { label: '专业客观', value: '专业客观' },
    { label: '亲切体验', value: '亲切体验' },
    { label: '对比测评', value: '对比测评' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          产品评测生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '手机/数码产品',
              overallRating: 4.5,
              style: '专业客观',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="overallRating"
                  label="整体评分"
                  rules={[{ required: true, message: '请选择整体评分' }]}
                >
                  <div ref={overallRatingRef}>
                    <Rate allowHalf defaultValue={4.5} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="评测风格"
                  rules={[{ required: true, message: '请选择评测风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择评测风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="testingExperience"
                  label="使用体验（可选）"
                >
                  <div ref={testingExperienceRef}>
                    <TextArea rows={3} placeholder="请输入产品的使用体验，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="pros"
                  label="产品优点（可选）"
                >
                  <div ref={prosRef}>
                    <TextArea rows={3} placeholder="请输入产品的优点，每行一个，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="cons"
                  label="产品不足（可选）"
                >
                  <div ref={consRef}>
                    <TextArea rows={3} placeholder="请输入产品的不足，每行一个，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="comparison"
                  label="同类产品对比（可选）"
                >
                  <TextArea rows={3} placeholder="请输入与同类产品的对比，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成产品评测'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}